/*
 * @Author: Sun 
 * @Date: 2019-06-22 16:33:20 
 * @Last Modified by: Sun
 * @Last Modified time: 2019-06-22 17:04:03
 */

import React, { Component } from 'react';

import { CSSTransition } from 'react-transition-group'

import './style.css'
class Boss extends Component {
  constructor(props) {
    super(props);
    this.state = {  
      isShow:true
    };
    this.toToggole=this.toToggole.bind(this)
  }
    // {/* <div className={this.state.isshow?'show':'hied'}>Boss 1 </div> */}
  render() {
    return (
      <div>
        <CSSTransition
           in={this.state.isShow}   //用于判断是否出现的状态
           timeout={2000}           //动画持续时间
           classNames="boss-text"   //className值，防止重复
           unmountOnExit//元素退场时，自动把DOM也删除，
        > 
        <div>BOSS级人物-孙悟空</div>
        </CSSTransition>
        <div><button onClick={this.toToggole}>点击btn</button></div>
      </div>
    );
  }
  toToggole(){
    this.setState(
      (state, props) => 
      { 
        return {
          isShow:this.state.isShow?false:true
        }
      }
    )
    
  }
}

export default Boss;